<template>
  <div class="order-item">
    <div class="top-info">
      <div class="shop-logo">
        <img
          :src="shopInfo.restaurantPicture[0]"
          :alt="shopInfo.restaurantName"
        />
      </div>
      <div class="relative-info">
        <div class="shop-name">
          {{ shopInfo.restaurantName }}
          <van-icon name="arrow" />
        </div>
        <!-- <div class="order-id">{{ orderForStatus.orderId }}</div> -->
        <div class="order-date">{{ orderForStatus.orderPurchaseTime }}</div>
      </div>
      <div class="order-status">
        {{ statusForText[orderForStatus.orderState] }}
      </div>
    </div>
    <div class="goods-list-info">
      <el-table
        :data="formatOrdersItems"
        style="width: 100%"
        max-height="108"
        size="mini"
      >
        <el-table-column prop="goodsName" label="商品" min-width>
        </el-table-column>
        <el-table-column prop="date" label="用餐日期" min-width>
        </el-table-column>
        <el-table-column
          prop="count"
          label="数量"
          width="50"
          class-name="count"
        >
        </el-table-column>
      </el-table>
    </div>

    <div class="order-total">
      总计 <span class="total-price">￥{{ total }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["shopInfo", "orderForStatus"],
  data() {
    return {
      statusForText: {
        CANCEL_PAY: "已取消",
        WAITING_PAY: "待支付",
        WAITING_EVALUATE: "待评价",
        ALREADY_EVALUATE: "已评价",
        ALREADY_PAY: "完成"
      },
      total: 0,
    };
  },
  computed: {
    formatOrdersItems() {
      let ordersItems = [];

      this.orderForStatus.orderItems.forEach((item) => {
        let orderItem = {
          goodsName: item.mealItem.mealName,
          date: this.orderForStatus.orderPurchaseTime.split(" ")[0],
          count: `x${item.purchaseNum}`,
        };

        this.total += item.purchaseNum * (item.purchasingMealPrice / 100); // 后端返回的价钱都是分
        ordersItems.push(orderItem);
      });
      this.total = Number(Number(this.total).toFixed(2));
      return ordersItems;
    },
  },
};
</script>

<style lang="scss" scoped>
$price_color: rgb(212, 3, 3);
.order-item {
  padding: 10px;
  background-color: #fff;
  font-size: 12px;
  margin: 10px 0;
}
.top-info {
  display: flex;
  justify-content: space-between;

  .shop-logo {
    width: 60px;
    height: 60px;
    margin: 0 20px;
    border-radius: 10px;
    overflow: hidden;
  }

  .relative-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    max-width: 210px;
    color: #bdbdbd;

    .shop-name {
      font-size: 15px;
      color: #000;
    }
    // .order-id {
    //   width: 80%;
    //   margin: 5px 0;
    // }
  }

  .order-status {
    font-size: 15px;
    color: #bdbdbd;
  }
}
.goods-list-info {
  width: 80%;
  margin: 15px auto;
}

.order-total {
  margin-top: 5px;
  text-align: right;
  color: #bdbdbd;
  font-size: 15px;

  .total-price {
    font-weight: 700;
    color: $price_color;
  }
}

::v-deep .el-table_1_column_3 {
  color: #bdbdbd;
}
</style>
